<section>
  <div>All select：{{ (lvTable.getSelection() | userProp) || 'none' }}</div>
  <div>Current select：{{ (lvTable.getRenderSelection() | userProp) || 'none' }}</div>
</section>
<section>
  <button lv-button (click)="addRow()">Add</button>
</section>

<lv-datatable [lvData]="data" #lvTable [lvPaginator]="page" lvSelectionMode="multiple" [lvSelection]="selection">
  <thead>
    <tr>
      <th width="40px" [class.lv-table-column-has-selection]="true">
        <label
          class="custom-checkbox"
          lv-checkbox
          (ngModelChange)="toggleSelection()"
          [ngModel]="isAllCheck"
          [lvIndeterminate]="isHalfCheck"
        ></label>
      </th>
      <th lvCellKey="name">Name</th>
      <th lvCellKey="age">Age</th>
      <th lvCellKey="random">Random</th>
      <th lvCellKey="operation">Operation</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of lvTable.renderData">
      <tr (click)="selectionRow(item)">
        <td>
          <label
            lv-checkbox
            class="lv-cell-checkbox"
            (ngModelChange)="selectionRow(item)"
            [ngModel]="lvTable.isSelected(item)"
            (click)="selectionRow(item)"
          ></label>
        </td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.random }}</td>
        <td (click)="deleteRow($event, item)"><a>Delete</a></td>
      </tr>
    </ng-container>
  </tbody>
</lv-datatable>
<lv-paginator #page lvPageSize="5" [lvPageSizeOptions]="[5, 10, 50, 100]"></lv-paginator>

<section class="section-info">
  <div>select：{{ (lvRadioTable.getRenderSelection() | userProp) || 'none' }}</div>
</section>

<lv-datatable [lvData]="radioData" #lvRadioTable>
  <thead>
    <tr>
      <th width="40px" [class.lv-table-column-has-selection]="true"></th>
      <th>Id</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of lvRadioTable.renderData" (click)="radioSelect(item, $event)">
      <td>
        <label
          lv-radio
          [ngModel]="lvRadioTable.isSelected(item)"
          [lvControl]="true"
          (click)="radioSelect(item, $event)"
          style="display: flex; align-items: center"
        ></label>
      </td>
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </tbody>
</lv-datatable>
